<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
    <script type="text/javascript">
        function showHint(str)
        {
            node=document.getElementById("result");
            while (node.hasChildNodes()) {
             node.removeChild(node.lastChild);
            }
            if (str.length==0)
            {
            document.getElementById("keyword").innerHTML="";
            return;
            }
            xmlHttp=new XMLHttpRequest();
            if (xmlHttp==null)
            {
            alert ("Your browser does not support AJAX!");
            return;
            }
            var url="http://localhost/CODE2012/MusicWeb/index.php/CMain/SelectProduct/";
           // url=url+"?q="+str;
            url=url+str;
          // url=url+"&sid="+Math.random();
            xmlHttp.onreadystatechange=stateChanged;
            xmlHttp.open("GET",url,true);
            xmlHttp.send(null);
        }
        
        function stateChanged()
            {
                if(xmlHttp.readyState==4)
                    {
                        if (xmlHttp.status = 200)
                        $result = JSON.parse(xmlHttp.responseText);
                         console.log($result);
                        if ($result.success)
                        {   
                            //document.getElementById("result").innerHTML= $result.value;
                            for(i=0;i<$result.value.length;i++)
                            {
                                var childnode=document.createElement("li");
                                var textnode=document.createTextNode($result.value[i]['name']);
                                 var imgnode=document.createElement("img");
                                imgnode.src="http://localhost/CODE2012/MusicWeb/application/upload/image/data/"+ $result.value[i]['image'];
                                imgnode.height=50;
                                imgnode.width=50;
                                childnode.appendChild(textnode);
                                childnode.appendChild(imgnode);
                            if(document.getElementById("result").getElementsByTagName("li").length<4)
                                 document.getElementById("result").insertBefore(childnode,document.getElementById("result").getElementsByTagName("li").length);
                            else {

                                  document.getElementById("result").insertBefore(childnode,document.getElementById("result").getElementsByTagName("li").length);
                                   document.getElementById("result").removeChild(document.getElementById("result").childNodes[0]);
                            }
                             }
                           
                        }
                        else
                        {
                                
                        }
                            
                    }
            }
</script>
<body>
	
<form >
    <input type="text" id="keyword" onchange="showHint(this.value);">
</form>
<div >
    <ul id="result"></ul>
    

</div>
</body>

</html>